<script setup>
    import {ref as 响应} from 'vue'

    
    const 元素数量 = 响应(3)

    const 添加元素 = () => {
        元素数量.value ++
    }

    const 删除元素 = () => {
        元素数量.value --
    }
</script>

<template>
    <div>
        <h1>基础用法</h1>
        <el-scrollbar height="400px">
            <p v-for="项目 in 20" :key="项目" class="基础用法">{{ 项目 }}</p>
        </el-scrollbar>
    </div>
    <div>
        <h1>横向滚动</h1>
        <el-scrollbar>
            <div class="伸缩容器">
                <p v-for="项目 in 50" :key="项目" class="伸缩元素">
                    {{ 项目 }}
                </p>
            </div>
        </el-scrollbar>
    </div>
    <div>
        <h1>最大高度</h1>
        <el-button @click="添加元素">添加元素</el-button>
        <el-button @click="删除元素">删除元素</el-button>
        <el-scrollbar max-height="400px">
            <p v-for="项目 in 元素数量" :key="项目" class="伸缩元素">{{ 项目 }}</p>
        </el-scrollbar>
    </div>
    <div>
        <h1>手动滚动</h1>
    </div>
</template>

<style scoped>
    .基础用法 {
        background: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        margin: 10px;
        text-align: center;
        border-radius: 4px;
    }
    .伸缩容器 {
        display: flex;
        width: fit-content;
    }
    .伸缩元素 {
        background: var(--el-color-danger-light-9);
        color: var(--el-color-danger);
        width: 100px;
        height: 50px;
        margin: 10px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 8px;
    }
</style>